<template>
    <!-- 弹窗 -->
    <view class="dialog">
        <up-popup :show="show" :round="14" mode="center" @close="closepop" :lazyRender="false"
            :closeOnClickOverlay="false">
            <view class="popup_box">
                <!-- 图标 -->
                <view class="image">
                    <image class="uploadimg" :src="`${baseUrl}` + imagesucceedSrc" mode="scaleToFill" />
                </view>
                <!-- 标题文字 -->
                <view class="popup_title">
                    {{ subtitle }}
                </view>
                <!-- input 输入框 -->
                <view v-if="editAgency">
                    <view class="popup_input">
                        <view class="popup_symbol">价格（男）</view>
                        <up-input v-model="inputValue" type="digit" placeholder="请输入" />
                    </view>
                    <view class="popup_input">
                        <view class="popup_symbol">价格（女）</view>
                        <up-input v-model="inputValuewoman" type="digit" placeholder="请输入" />
                    </view>

                </view>
                <view v-else-if="distinction == 'number' && editAgency == false">
                    <view class="popup_input">
                        <view class="popup_symbol">人数（男）</view>
                        <up-input v-model="inputValue" type="digit" placeholder="请输入" />
                    </view>
                    <view class="popup_input">
                        <view class="popup_symbol">人数（女）</view>
                        <up-input v-model="inputValuewoman" type="digit" placeholder="请输入" />
                    </view>

                </view>
                <view class="popup_input" v-else-if="distinction == 'salary'">
                    <view class="popup_symbol">￥</view>
                    <up-input v-model="inputValue" type="digit" placeholder="请输入" />
                </view>
                <view class="popup_input" v-else>
                    <!-- <view class="popup_symbol">￥</view> -->
                    <up-input v-model="inputValue" type="text" placeholder="请输入" />
                </view>
                <!-- 提示文本 -->
                <view class="hint_text">
                    <view class="hint_image">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/piliangshezhi_icon1@2.png`"
                            mode="scaleToFill" />
                    </view>
                    <view class="hint_information "> {{ hint }}</view>
                </view>
                <!-- 按钮集合 -->
                <view class="button_box">
                    <view class="left_button" @tap="closepop">取消</view>
                    <view class="right_button" @tap="affirm">确认</view>
                </view>
            </view>
        </up-popup>
    </view>

</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import { ref, watch } from "vue";
const emits = defineEmits(['cancel', 'affirm', 'update:value', 'clear-text']);
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    imagesucceedSrc: {
        type: String,
        default: ''
    },
    subtitle: {
        type: String,
        default: '提交成功'
    },
    dialogButton: {
        type: String,
        default: '我知道了'
    },
    dialogStatus: {
        type: Boolean,
        default: true
    },
    hint: {
        type: String,
        default: ''
    },
    //区分事工时 金额
    distinction: {
        type: String,
        default: ''
    },
    editAgency: {
        type: Boolean,
        default: false
    },
    list: {
        type: String,
        default: ''
    },
    click_type: {
        type: String,
        default: ''
    }
});
watch(() => props.show, (newVal, oldVal) => {
    if (newVal == true) {
        if (props.click_type == 'staff') {
            inputValue.value = props.list.man_salary
            inputValuewoman.value = props.list.woman_salary
        } else if (props.click_type == 'agency') {
            inputValue.value = props.list.agent_man_salary
            inputValuewoman.value = props.list.agent_woman_salary
        } else if (props.click_type == 'agencyCap') {
            inputValue.value = props.list.agent_man_salary_max
            inputValuewoman.value = props.list.agent_woman_salary_max
        }else if (props.click_type == 'number') {
            inputValue.value = props.list.man_num
            inputValuewoman.value = props.list.woman_num
        } 
        else {
            inputValue.value = ''
            inputValuewoman.value = ''
        }
    }
}
)

//点击事件
function closepop() {
    emits('cancel', false)
    return;
}
const inputValue = ref()
const inputValuewoman = ref()
function affirm() {
    emits('affirm', inputValue.value, props.distinction, inputValuewoman.value)
    return;
}

</script>

<style scoped lang="scss">
/* //弹窗 */
.dialog {

    // 弹出层
    .popup_box {
        width: 600rpx;
        // height: 460rpx;
        padding-bottom: 50rpx;
        border-radius: 28rpx;
        background-color: #FFFFFF;


        // 图标
        .image {
            position: absolute;
            left: 0;
            right: 0;
            top: -100rpx;
            margin: auto;
            width: 256rpx;
            height: 256rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        // 标题文字
        .popup_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 40rpx;
            font-style: normal;
            text-decoration: none;
            margin-top: 148rpx;
            margin-bottom: 68rpx;
            text-align: center;
        }

        // 输入框
        .popup_input {
            height: 96rpx;
            display: flex;
            align-items: center;
            border-radius: 28rpx;
            background-color: #F4F6FA;
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
            margin: 0 40rpx;
            margin-bottom: 12rpx;

            .popup_symbol {
                margin-left: 20rpx;
                font-size: 28rpx;
            }
        }

        // 提示文本
        .hint_text {
            display: flex;
            align-items: center;
            height: 32rpx;
            font-family: PingFangSC;
            color: $uni-color-primary;
            font-weight: $uni-font-weight;
            font-size: 22rpx;
            font-style: normal;
            text-decoration: none;
            margin-bottom: 40rpx;

            .hint_information {
                margin-top: 30rpx;
            }

            .hint_image {
                width: 26rpx;
                height: 26rpx;
                margin-right: 10rpx;
                margin-left: 60rpx;
                margin-top: 30rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        // 按钮集合
        .button_box {
            display: flex;

            .left_button {
                width: 50%;
                height: 82rpx;
                text-align: center;
                line-height: 82rpx;
                border-radius: 45rpx;
                border: 4rpx solid $uni-color-primary;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                margin-left: 40rpx;
                margin-right: 20rpx;
            }

            .right_button {
                width: 50%;
                height: 90rpx;
                text-align: center;
                line-height: 90rpx;
                border-radius: 45rpx;
                background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
                font-family: PingFangSC;
                color: #FFFFFF;
                font-weight: $uni-font-weight;
                font-size: 34rpx;
                font-style: normal;
                text-decoration: none;
                margin-right: 40rpx;
                margin-left: 20rpx;
            }
        }
    }
}

:deep(.u-popup) {
    position: relative;

    .u-icon__icon {
        background: transparent;
    }
}

.md-modal {
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    // visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/* Effect 8: 3D flip horizontal */
.md-effect-8.md-modal {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.md-effect-8 .md-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-70deg);
    -moz-transform: rotateY(-70deg);
    -ms-transform: rotateY(-70deg);
    transform: rotateY(-70deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
}

.md-show.md-effect-8 .md-content {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
}
</style>